<script lang='ts'>
import { defineComponent, ref } from "vue";
import AttributeQuery from "./attr/index.vue";
import CombinationQuery from "./combination/index.vue";
import SpaceQuery from "./space/index.vue";

export default defineComponent({
  name: "OnlineQuery",
  components: { AttributeQuery, CombinationQuery, SpaceQuery },
  setup() {
    const activeName = ref("first");
    const handleClick = (tab: any, event: any) => {
      console.log(tab, event);
    };
    return {
      activeName,
      handleClick,
    };
  },
});
</script>

<template>
  <div class="onlinequery-page-wrap">
    <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
      <el-tab-pane label="属性查询" name="first"
        ><AttributeQuery></AttributeQuery
      ></el-tab-pane>
      <el-tab-pane label="空间查询" name="second"
        ><SpaceQuery></SpaceQuery
      ></el-tab-pane>
      <el-tab-pane label="组合查询" name="third"
        ><CombinationQuery></CombinationQuery>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang='less' scoped>
.onlinequery-page-wrap {
  padding: 5px;
}
</style>